<script setup lang="ts">
import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
import zh_CN from 'ant-design-vue/es/locale/zh_CN';
import { useAppStore } from './stores';
import { useTitle } from '@vueuse/core';

const theme = computed<ThemeConfig>(() => {
  return {
    token: {
      colorPrimary: '#0768FA',
      colorTextPlaceholder: '#ACAEB2'
    },
    components: {
      Input: {
        colorText: "#313337",
        borderRadiusLG: 6,
        fontSizeLG: 14
      },
      InputNumber: {
        colorText: "#313337",
        borderRadiusLG: 6,
        fontSizeLG: 14
      },
      Select: {
        colorText: "#313337",
        borderRadiusLG: 6,
        fontSizeLG: 14
      },
      Radio: {
        borderRadiusLG: 6
      },
      Button: {
        borderRadiusLG: 6,
        fontSizeLG: 14
      }
    }
  }
})
const appStore = useAppStore()
const pageTitle = useTitle('企业后台', { titleTemplate: '%s-好工作' })
const route = useRoute()
watch(route, () => {
  const { meta: { title } } = route
  if (title) {
    pageTitle.value = title
  }
})
</script>

<template>
  <a-config-provider :locale="zh_CN" :theme>
    <Teleport to="body">
      <a-spin size="large" v-bind="appStore.loading" :class="['!fixed inset-0 !flex justify-center items-center', appStore.loading.spinning ? 'z-[999999999]' : '-z-10']" />
    </Teleport>
    <RouterView v-slot="{ Component, route }">
        <div class="app-wrapper">
            <component :is="Component" :key="route.path" />
        </div>
    </Routerview>
  </a-config-provider>
</template>

<style scoped>
.app-wrapper {
  width: 100%;
  position: relative;
}
</style>
